<template>
  <div class="head-box">
    <div class="flex-center">
      <div class="page-skip" @dblclick="pageSkip">
        <img src="@/assets/home.png" class="home">
      </div>
      <div v-if="title" class="title f-s-16">
        {{ title }} <span v-if="lint" class="m-l-5 m-r-5"> / </span> {{ lint }}
      </div>
    </div>

    <slot />
    <!-- 确定弹框 -->
    <el-dialog
      :visible.sync="notarizeDialog"
      title="确定退出该页面? 请确定是否已学习进入该页面的方法在退出?"
      :close-on-click-modal="false"
      top="30vh"
      width="600px"
    >
      <div class="dialog-confirm-btn">
        <el-button class="cancel" @click="notarizeDialog = false">

          <svg-icon icon-class="b-cancel" />
          取 消
        </el-button>
        <el-button type="primary" class="confirm" @click="dialogConfirm()">
          <svg-icon icon-class="b-confirm" />
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MesTitle",
  props: {
    // 标题
    title: {
      type: String,
      default: ""
    },
    // 线体
    lint: {
      type: String,
      default: ""
    },
    // 跳转地址
    path: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      notarizeDialog: false
    };
  },
  methods: {
    pageSkip() {
      this.notarizeDialog = true;
    },
    dialogConfirm() {
      this.notarizeDialog = false;
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
